<template>
	<view>
		<view class="header_bt_01">
			<image :src="userinfo.userImg" class="hander_tx"></image>
			<uni-search-bar class="uni-mt-10" style="color: #f3f3f3;" bgColor="#F8F8F8" radius="100"
				placeholder="搜索相关内容" clearButton="auto" cancelButton="auto" @confirm="search" />
		</view>
		<view class="Run_1" style="margin-top: 120rpx;border-radius: 200rpx;">
			<view class="Run_1_1" :class="GreadId===0?'head_Gle':''" @click="OnquAndmai(0)">
				<text class="Run_2">全部</text>
			</view>

			<view class="Run_1_2" :class="GreadId===1?'head_Gle':''" @click="OnquAndmai(1)">
				<text class="Run_3">已接单</text>
			</view>
			<view class="Run_1_2" :class="GreadId===2?'head_Gle':''" @click="OnquAndmai(2)">
				<text class="Run_3">已完成</text>
			</view>
			<view class="Run_1_2" :class="GreadId===3?'head_Gle':''" @click="OnquAndmai(3)">
				<text class="Run_3">异常单</text>
			</view>
			<view class="Run_1_2" :class="GreadId===4?'head_Gle':''" @click="OnquAndmai(4)">
				<text class="Run_3">已取消</text>
			</view>
		</view>
		<view class="uni_card_1">
			<uni-card margin="10px 15px 10px 15px" v-for="(item,value) in RunOrdertListL" :key="value" title="跑腿订单" sub-title="订单编号:1996481adsadf48"
				:extra="item.Orderstatus===1?'已接单':item.Orderstatus===2?'已完成':item.Orderstatus===3?'异常单':item.Orderstatus===4?'已取消':''"
				v-if="GreadId===0?item.Orderstatus===1 || item.Orderstatus===2 || item.Orderstatus===3 || item.Orderstatus===4:GreadId===1?item.Orderstatus===1:GreadId===2?item.Orderstatus===2:GreadId===3?item.Orderstatus===3:GreadId===4?item.Orderstatus===4:''"
				padding="10px 0" :thumbnail="avatar">
				<view class="" style="width: 646rpx;">
					<image style="width: 100px;height: 100px;border-radius: 15px;" :src="cover"></image>
					<text class="uni-body uni-mt-5 card_cl_1" v-if="item.type2===1">跑腿服务-帮我取</text>
					<text class="uni-body uni-mt-5 card_cl_1" v-else-if="item.type2===2">跑腿服务-帮我买</text>
					<text class="uni-body uni-mt-5 card_cl_2">正常件</text>
					<text class="uni-body uni-mt-5 card_cl_3">配送至-{{ item.Range }}</text>
					<text class="uni-body uni-mt-5 card_cl_4">x1</text>
					<text class="card_cl_5">酬金：<text style="color: red;">{{ item.price }}</text> </text>
				</view>
				<view slot="actions" class="card-actions">
					<button v-if="item.Orderstatus===1" class="BjBunn2" @click="confirm(item)" size="mini">确认送达</button>
					<button v-if="item.Orderstatus===1" class="BjBunn1" @click="cancel(item)" size="mini">取消订单</button>
					<button  :class="item.Orderstatus===1?'BjBunn3':'BjBunn4'" @click="Viewdetails(item)" size="mini">查看详情</button>
				</view>
			</uni-card>
			<view style="padding:5px 0px 20px 0px;" v-if="Fwsum>=3">
				<uni-load-more color="#007AFF" :status="status" iconType="auto" />
			</view>
			<view style="height: 50px;">
			
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			// 将 m_user 模块中的 userinfo 映射到当前页面中使用
			...mapState('m_user', ['userinfo']),
		},
		data() {
			return {
				GreadId: 0, //0 全部 1 已接单 2 已完成 3 异常单 4 已取消
				RunOrdertListL: [], //跑腿订单
				status: 'more', //动态加载状态
				pageNum: 1, //当前加载页数
				Fwsum: 0, //计算区域内订单的数里
				cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
			};
		},
		onLoad() {
			this.loadSJ()
			this.Fwsum=this.RunOrdertListL.length
		},
		methods: {
			loadSJ() {
				this.RunOrdertListL.push({
					no: "159862158888",
					userName: "方晓佳",
					phone:'13559453225',
					Ftime: "2022年4月9日 12:14",
					type: 1, //类型1 接单
					type2: 1, // 1代取 2帮买
					Orderstatus: 1, //订单状态
					remarks:'',//描述原因
					title: "跑腿-快递代取-东区",
					Pick_uptime: '立即上门', //取件时间
					Range: '东区',
					qtext: "学校菜鸟驿站包裹取件码编号1000-13-2910，请及时取件。",
					stext: "福州大学至诚学院中二405",
					price: "￥5.00",
				}, {
					no: "159862158888",
					userName: "方晓佳",
					phone:'13559453225',
					Ftime: "2022年4月9日 12:14",
					type: 1, //类型1 接单
					type2: 2, // 1代取 2帮买
					Orderstatus: 2, //订单状态
					remarks:'',//订单异常原因
					title: "跑腿-快递代取-东区",
					Pick_uptime: '立即上门', //取件时间
					Range: '东区',
					qtext: "学校菜鸟驿站包裹取件码编号1000-13-2910，请及时取件。",
					stext: "福州大学至诚学院中二405",
					price: "￥5.00",
				}, {
					no: "159862158888",
					userName: "方晓佳",
					phone:'13559453225',
					Ftime: "2022年4月9日 12:14",
					type: 1, //类型1 接单
					type2: 2, // 1代取 2帮买
					Orderstatus: 3, //订单状态
					remarks:'配送超时系统已自动取消订单',//订单异常原因
					title: "跑腿-快递代取-东区",
					Pick_uptime: '立即上门', //取件时间
					Range: '东区',
					qtext: "学校菜鸟驿站包裹取件码编号1000-13-2910，请及时取件。",
					stext: "福州大学至诚学院中二405",
					price: "￥5.00",
				}, {
					no: "159862158888",
					userName: "方晓佳",
					phone:'13559453225',
					Ftime: "2022年4月9日 12:14",
					type: 1, //类型1 接单
					type2: 1, // 1代取 2帮买
					Orderstatus: 4, //订单状态
					remarks:'配送太慢，用户手动取消订单！',//订单异常原因
					title: "跑腿-快递代取-东区",
					Pick_uptime: '立即上门', //取件时间
					Range: '东区',
					qtext: "学校菜鸟驿站包裹取件码编号1000-13-2910，请及时取件。",
					stext: "福州大学至诚学院中二405",
					price: "￥5.00",
				})
			},
			//导航栏切换不同范围
			
			//确认送达
			confirm(item){
				console.log("确认送达")
			},
			//取消订单
			cancel(item){
				console.log("取消订单")
			},
			//查看详情
			Viewdetails(item){
				console.log("查看详情")
				uni.setStorage({
					key:"OrderDetails",
					data:item,
					success:function(){
						console.log("向下级发送："+item)
					}
				})
				uni.navigateTo({
					url: './View_details'
				})
			},
			OnquAndmai(val) {
				this.GreadId = val
				//计算某个范围内订单的数里
				this.Fwsum = 0
				this.RunOrdertListL.forEach((item, value, arr) => {
					if (val === 0) {
						this.Fwsum++
					} else if (item.Orderstatus === 1 && val === 1) {
						this.Fwsum++
					} else if (item.Orderstatus === 2 && val === 2) {
						this.Fwsum++
					} else if (item.Orderstatus === 3 && val === 3) {
						this.Fwsum++
					} else if (item.Orderstatus === 4 && val === 4){
						this.Fwsum++
					}
					
				})
			},
			//接单按钮
			RunOrder(item) {
				console.log(item)
			},
			//动态加载
			getmo() {
				this.RunOrdertListL.push({
					no: "159862158888",
					userName: "方晓佳",
					phone:'13559453225',
					Ftime: "2022年4月9日 12:14",
					type: 1, //类型1 接单
					type2: 1, // 1代取 2帮买
					Orderstatus: 4, //订单状态
					title: "跑腿-快递代取-东区",
					Pick_uptime: '立即上门', //取件时间
					Range: '东区',
					qtext: "学校菜鸟驿站包裹取件码编号1000-13-2910，请及时取件。",
					stext: "福州大学至诚学院中二405",
					price: "￥5.00",
				})
			}
		},
		onReachBottom() {
			console.log("触底啦")
			this.status = 'loading'
			const that = this;
			setTimeout(function() {
				that.pageNum++,
					that.getmo()
			}, 1000);

		},

	}
</script>

<style lang="scss">
	//头部样式
	.header_bt_01 {
		height: 115rpx;
		background-color: #FFFFFF;
		border-bottom: 2px solid #F7F7F7;

	}

	//头部样式--头像
	.hander_tx {
		width: 90rpx;
		height: 90rpx;
		border-radius: 100px;
		margin: 0px 0px 0px 8px;
	}

	//头部样式--取消字体 白色
	/deep/ .uni-searchbar__cancel {
		padding-left: 20rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		color: #f3f3f3;
	}

	//顶部导航栏
	.Run_1 {
		border-width: 0px;
		position: absolute;
		top: -6rpx;
		width: 750rpx;
		height: 80rpx;
		display: flex;
		background-color: #FFFFFF;
		text-align: center;
	}

	.Run_1_1,
	.Run_1_2 {
		width: 325rpx;
	}

	//顶部导航栏 文本样式
	.Run_2,
	.Run_3 {
		font-size: 15px;
		font-family: "微软雅黑";
		height: 80rpx;
		line-height: 80rpx;
	}

	.head_Gle {
		background-color: rgba(81, 211, 211, 1);
		border-radius: 50rpx;
		font-family: "微软雅黑";
		color: seashell;
		font-weight: 700;
		font-style: italic;
		letter-spacing: normal;
		box-shadow: 5px 10px 20px #51d3d3;
	}

	.uni_card_1 {
		position: absolute;
		top: 190rpx;
		font-size: 15px;
	}

	.card_cl_1 {
		position: absolute;
		padding-left: 20rpx;
		font-size: 15px;
	}

	.card_cl_2 {
		position: absolute;
		padding-left: 20rpx;
		padding-top: 60rpx;
		color: #999999;
		font-size: 12px;
	}

	.card_cl_3 {
		position: absolute;
		padding-left: 20rpx;
		padding-top: 120rpx;
		color: #999999;
		font-size: 12px;
	}

	.card_cl_4 {
		position: absolute;
		padding-left: 400rpx;
		padding-top: 50rpx;
		color: rgb(26, 188, 156);
	}

	.card_cl_5 {
		position: absolute;
		padding-left: 260rpx;
		padding-top: 140rpx;
		font-size: 14px;
	}

	//编辑 删除按钮样式
	//删除
	.BjBunn1 {
		width: 200rpx;
		height: 64rpx;
		border: 1px solid #999999;
		color: #999999;
		margin-right: 20rpx;
		float: right;
		margin-bottom: 20rpx;
	}

	.BjBunn2 {
		width: 200rpx;
		height: 64rpx;
		border: 1px solid red;
		color: red;
		float: right;
		margin-bottom: 10px;
	}

	.BjBunn3 {
		width: 200rpx;
		height: 64rpx;
		border: 1px solid #999999;
		color: #999999;
		margin-right: 20rpx;
		float: right;
		margin-bottom: 20rpx;
	}
	.BjBunn4 {
		width: 200rpx;
		height: 64rpx;
		border: 1px solid #999999;
		color: #999999;
		float: right;
		margin-bottom: 20rpx;
	}
	.card-actions {
		border-top: 1px rgba(26, 188, 156, 1) solid;
		padding-top: 20rpx;
	}
</style>
